<template>
	<view>
		<!-- 结果列表 -->
		<view style="padding: 20rpx 30rpx;">
			<!-- 代表一个好友的申请 -->
			<view v-for="req in reqList" class="user_view">
				<view class="left_view">
					<img :src="$.getImg(req.header)" class="header_img"/>
					<view class="text_view">
						<text style="font-weight: 900; margin-bottom: 10rpx;">{{req.nickname}}</text>
						<text style="font-size: 26rpx; color: gray; margin-bottom: 30rpx;">{{req.username}}</text>
						<text style="font-size: 26rpx; color: gray; width: 400rpx; 
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;">请求验证：{{req.info}}</text>
					</view>
				</view>
				<view class="right_view" v-if="req.status == 0">
					<button style="margin: 0px; font-size: 27rpx; width: auto; background-color: firebrick; margin-left: 30rpx;" class="btn_cls" @click="requestHandler(req.id, 2)">拒绝</button>
					<button style="margin: 0px; font-size: 27rpx; width: auto;" class="btn_cls" @click="openPopup(req.id)">通过</button>
				</view>
				<view class="right_view" v-if="req.status == 1">
					<text style="font-size: 27rpx; color: green;">该申请已通过</text>
				</view>
				<view class="right_view" v-if="req.status == 2">
					<text style="font-size: 27rpx; color: firebrick;">该申请已拒绝</text>
				</view>
			</view>
		</view>
		
		<!-- 底部的弹出框 -->
		<uni-popup ref="popup" type="bottom">
			
			<view class="popup_cls">
				<input v-model="form.beizhu"  class="input_cls"  placeholder="好友备注"/>
				<button class="btn_cls" style="width: auto; margin-top: 40rpx;" @click="requestHandler(null, 1)">通过申请</button>
			</view>
			
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//给我的申请列表
				reqList: [],
				//提交的表单
				form: {
					reqid: "",//处理的申请ID
					beizhu: "",//被申请者给申请者的备注
					status: ""//处理的状态
				}
			}
		},
		methods: {
			//查询好友申请
			queryFriendRequest(){
				this.$.ajax({
					url: "/friendRequest/query2myrequest",
					success: (result) => {
						this.reqList = result;
						
						//结束下拉刷新
						uni.stopPullDownRefresh();
					}
				});
			},
			//处理通过，打开弹窗
			openPopup(rid){
				this.form.reqid = rid;
				//打开弹窗
				this.$refs.popup.open();
			},
			//申请处理的方法 
			requestHandler(rid, status){
				//如果有请求ID，再设置
				if(rid) {
					this.form.reqid = rid;
				}
				//设置处理状态 1-通过 2-拒绝
				this.form.status = status;
				//发送请求给后端
				this.$.ajax({
					type: "POST",
					url: "/friendRequest/requestHandler",
					data: this.form,
					success: (result) => {
						uni.showToast({
							title: "申请处理完成..."
						})
						
						//重新查询好友申请列表
						this.queryFriendRequest();
					}
				});
			}
		},
		onLoad() {
			this.queryFriendRequest();
		},
		onPullDownRefresh(){
			console.log("用户开始下来刷新了！");
			this.queryFriendRequest();
		}
	}
</script>

<style>
	.input_cls {
		background-color: white; 
		padding: 20rpx 30rpx;
		border-radius: 10rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.user_view {
		height: 350rpx;
		margin-bottom: 40rpx;
		border-radius: 10rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.user_view {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding: 0 40rpx;
	}
	
	.header_img {
		width: 180rpx;
		height: 180rpx;
		margin-right: 30rpx;
		border-radius: 100rpx;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
	}
	
	.left_view {
		display: flex;
	}
	
	.text_view {
		display: flex;
		flex-direction: column;
		padding-top: 20rpx;
	}
	
	.right_view {
		display: flex;
		flex-direction: row-reverse;
		width: 100%;
		margin-top: 20rpx;
	}
	
	.popup_cls{
		width: 100%;
		height: 300rpx;
		background-color: white;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
